<template>
  <div class="app-container">
    <!--  查询  -->
    <el-card>
      <el-form ref="searchForm"  :inline="true" :model="formInline" class="demo-form-inline formHeight">
        <el-form-item prop="searchTxt" label="参数模板">
          <el-input v-model="formInline.temp_name" size="mini" clearable placeholder="请输入模板名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="getList">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!--  列表  -->
    <el-card class="el-card mt20">
      <el-button size="mini" type="primary" @click="addOrEdit(1)">新增</el-button>
      <el-table
        :data="tableData"
        :row-key="getRowKeys"
        :default-sort="{prop: formInline.sort, order: formInline.order}"
        :tree-props="{children: 'templates', hasChildren: 'hasChildren'}"
        @sort-change="tableSortChange"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
              :data="props.row.childList"
              align="center"
              style="width: 100%;"
              stripe
            >
              <el-table-column
                align="center"
                prop="temp_id"
                label="模板id"
              />
              <el-table-column
                align="center"
                prop="data_id"
                label="参数id"
              />
              <el-table-column
                align="center"
                prop="data_name"
                label="参数名"
              />
              <el-table-column
                align="center"
                prop="column_name"
                label="参数标识"
              />
              <el-table-column
                align="center"
                prop="mqtt_key"
                label="参数键值"
              />
              <el-table-column
                label="操作"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button
                    type="warning"
                    size="mini"
                    @click="childAddOrEdit(2, scope.row.id)"
                  >
                    修改
                  </el-button>
                  <el-button
                    type="danger"
                    size="mini"
                    @click="chilDel(scope.row.id)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          prop="temp_name"
          label="模板名称"
          sortable
          align="center"
        />
        <el-table-column
          prop="description"
          label="模板描述"
          align="center"
        />
        <el-table-column
          prop="created_at"
          label="创建时间"
          align="center"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="addChild(scope.row.id)"
            >
              添加模板参数
            </el-button>
            <el-button
              type="warning"
              size="mini"
              @click="addOrEdit(2, scope.row.id)"
            >
              修改
            </el-button>
            <el-button
              type="danger"
              size="mini"
              @click="del(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--   分页   -->
<!--      <el-pagination-->
<!--        background-->
<!--        class="paginationPage"-->
<!--        :page-sizes="[100, 200, 300, 400]"-->
<!--        :page-size="10"-->
<!--        :current-page="formInline.offset"-->
<!--        layout="total, prev, pager, next, jumper"-->
<!--        :total="total"-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleCurrentChange"-->
<!--      />-->
      <pagination style='float: right;' v-show='total>0' :total='total' :page.sync='formInline.offset' :limit.sync='formInline.limit' @pagination='getList' />
    </el-card>
    <div v-if="detailFlag">
      <Detail
        :id="detailId"
        :dialog-visible="detailFlag"
        :title="detailTitle"
        @close="close"
        @confirm="confirm"
      />
    </div>
    <div v-if="childFlag">
      <Child
        :id="childId"
        :dialog-visible="childFlag"
        :title="childTitle"
        :temp-id="tempId"
        @close="closeChild"
        @confirm="confirmChild"
      />
    </div>
  </div>
</template>

<script>
import { templateList, deleteTemplate, detailTemplate, deleteTemplateData } from '@/api/template'
import Detail from './components/detail'
import Child from './components/child'

export default {
  name: 'template',
  components: {
    Detail,
    Child
  },
  data() {
    return {

      tempId: 0, // 模板id
      childTitle: '新增', // 模板参数组件
      childFlag: false, // 模板参数
      childId: 0, // 模板参数
      detailTitle: '新增', // 模板组件
      detailFlag: false, // 模板组件
      detailId: 0, // 模板组件
      tableData: [],
      total: 0,
      // 搜索表单
      formInline: {

        offset: 0,
        limit: 10,
        order: 'ascending',

         temp_name:''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /**
     * @description: 新增模板数据
     * @author: 书童
     */
    addChild(id) {
      this.tempId = id
      this.childTitle = '新增'
      this.childFlag = true
    },
    /**
     * @description: 新增或编辑 模板
     * @author: 书童
     * @param: 1新增，2编辑
     */
    addOrEdit(num, id) {
      if (num === 1) {
        this.detailTitle = '新增'
        this.detailFlag = true
        this.detailId = id
      } else {
        this.detailTitle = '编辑'
        this.detailId = id
        this.detailFlag = true
      }
    },
    //  获取数据参数列表
    getList() {
      templateList(this.formInline).then(res => {
        this.tableData = res.data.templates
        this.total = res.data.total
      })
    },
    /**
     * @description: 排序
     * @author: 书童
     */
    tableSortChange(column) {
      this.formInline.order = column.order ? column.order : 'descending'
      this.formInline.sort = column.prop
      this.formInline.offset = 0
      this.getList()
    },
    /**
     * @description: 删除数据
     * @author: 书童
     * @param: id
     */
    del(id) {
      this.$confirm('是否要删除此条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTemplate({ id }).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        })
      })
    },
    /**
     * @description: 删除数据
     * @author: 书童
     * @param: id
     */
    chilDel(id) {
      this.$confirm('是否要删除此条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTemplateData({ id }).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        })
      })
    },
    /**
     * @description: 查询
     * @author: 书童
     */
    search() {
      this.formInline.offset = 0
      this.getList()
    },
    getRowKeys(row) {
      return row.id
    },
    handleSizeChange(val) {
      this.formInline.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.formInline.offset = val
      this.getList()
    },
    //  关闭弹窗组件
    close() {
      this.detailFlag = false
      this.detailId = ''
    },
    closeChild() {
      this.childFlag = false
      this.childId = 0
      this.tempId = 0
    },
    // 弹窗返回
    confirm() {
      this.close()
      this.getList()
    },
    confirmChild() {
      this.closeChild()
      this.getList()
    },
    expandChange(row, expandedRows) {
      // 关闭时不用请求数据
      if (expandedRows.length === 0) return
      detailTemplate({ id: row.id }).then(res => {
        const dataList = res.data.dataList.templates
        this.$set(row, 'dataList', dataList)
      })
    },
    /**
     * @description: 模板数据新增/编辑
     * @author: 书童
     * @param: 1新增，2编辑
     */
    childAddOrEdit(num, id) {
      if (num === 2) {
        this.childId = id
        this.childTitle = '编辑'
        this.childFlag = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.formHeight {
  height: 40px;
}

.mt20 {
  margin-top: 20px;
}

.tHeight {
  height: calc(100vh - 350px);
  overflow: auto;
}
</style>
